import {createElement, Component, render} from 'rax';
import {
    View, Text,
    RefreshControl, Touchable, Navigator,
    ListView, Tabbar, Button, Layout
} from 'weex-nuke';

let {MultiRow ,Grid,Col} = Layout;


import styles from './list.css';

let listData = [
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},
    {name1: '一期数据中心', name2: '检查离心机运行状态'}, {name1: '一期数据中心', name2: '检查离心机运行状态'},


];

class App extends Component {
    state = {
        notifCount: 0,
        presses: 0,
        index: 0,
        data: listData,
        btnIndex: 0
    };

    constructor() {
        super();
        Navigator.setTitle()
    }

    /**
     *
     */
    render() {
        return (
            <Tabbar position="bottom" activeKey="1">
                <Tabbar.Item
                    title="工单"
                    tabKey="1"
                >
                    {this._renderWorkOrderContent()}
                </Tabbar.Item>
                <Tabbar.Item
                    title="报警"
                    tabKey="2"
                >
                    {this._renderContent('#ff0000', 'Red Tab', this.state.notifCount)}
                </Tabbar.Item>
                <Tabbar.Item
                    title="资产"
                    tabKey="3"
                >
                    {this._renderContent('#21551C', 'Green Tab', this.state.presses)}
                </Tabbar.Item>
                <Tabbar.Item
                    title="我的"
                    tabKey="4"
                >
                    {this._renderContent('#21951C', 'Green Tab', this.state.presses)}
                </Tabbar.Item>
            </Tabbar>
        );
    }

    listHeader = () => {
        return (
            <View>

            </View>
        );
    }

    listLoading = () => {
        if (this.state.index < 4) {
            return (
                <View>
                    {/*<Text style={styles.text}>加载中...</Text>*/}
                </View>
            );
        } else {
            return null;
        }
    }

    /**
     *
     * @param item
     * @param index
     * @return {*}
     */
    listItem = (item, index) => {
        return (
            <View style={styles.item1}>
                <Grid>
                    <Col style={styles.col3}>
                        <Text style={styles.workOrderName}>{item.name1}</Text>
                        <Text style={styles.workOrderCont}>{item.name2}</Text>
                    </Col>
                    <Col style={styles.col1}>
                        <Text style={styles.workOrderName2}>{item.name2}</Text>
                    </Col>
                </Grid>
            </View>
        );
    }


    handleLoadMore = () => {
        setTimeout(() => {
            this.state.index++;
            if (this.state.index < 5) {
                this.state.data.push(
                    {name1: '一期数据中心'},
                    {name1: '一期数据中心'},
                    {name1: '一期数据中心'},
                    {name1: '一期数据中心'},
                    {name1: '一期数据中心'},
                    {name1: '一期数据中心'},
                    {name1: '一期数据中心'},
                    {name1: '一期数据中心'}
                );
            }
            this.setState(this.state);
        }, 1000);
    }

    _renderWorkOrderContent() {
        let {btnIndex} = this.state;
        return (
            <View style={styles.container}>
                <Button.Group style={styles.btnWithMargin} rect>
                    <Button
                        style={styles.btn}
                        type={btnIndex == 0 ? 'primary' : 'normal'}
                        onPress={() => {
                            this.setState({btnIndex: 0})
                        }}
                    >
                        计划工单
                    </Button>
                    <Button
                        style={styles.btn}
                        type={btnIndex == 1 ? 'primary' : 'normal'}
                        onPress={() => {
                            this.setState({btnIndex: 1})
                        }}
                    >
                        报警工单
                    </Button>
                    <Button
                        style={styles.btn}
                        type={btnIndex == 2 ? 'primary' : 'normal'}
                        onPress={() => {
                            this.setState({btnIndex: 2})
                        }}
                    >
                        保修工单
                    </Button>
                </Button.Group>
                <ListView
                    renderHeader={this.listHeader}
                    renderFooter={this.listLoading}
                    renderRow={this.listItem}
                    dataSource={this.state.data}
                    onEndReached={this.handleLoadMore}
                />
            </View>
        );
    }

    _renderContent(color, pageText, num) {
        return (
            <View style={[styles.tabContent, {backgroundColor: color}]}>
                <Text style={styles.tabText}>{pageText}</Text>
                <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
            </View>
        );
    }
}

export default App;
